<template>

	<div id="newdrug">
		<div v-for="medicine in tableData" style="width: 1000px;height: 200px;border:2px solid #FFFFFF;">
			
			<div id="left">
				<img :src="medicine.medicinePicture" width="180px" height="180px" alt style="border: 1px solid #42B983;position: absolute;margin-left: 20px;border-radius: 10px;margin-top: 10px;" />
			</div>
			<div style="position: absolute;margin-top: 120px; margin-left: -80px;">
				<div style="position: absolute;margin-top: -100px; margin-left: 300px;">
					<el-tag color="white" style="color: orangered;font-size: 15px;border: 0px;">药品名称:</el-tag>
					<el-input v-model="medicine.medicineName" :disabled="true" style="width: 350px;height: 20px;position: absolute;margin-left: 10px;margin-top:0px;font-size: 15px;"
					placeholder="药品名称">
					</el-input>
				</div>

				<div style="position: absolute;margin-top: -45px; margin-left: 300px;">
					<el-tag color="white" style="color: orangered;font-size: 15px;border: 0px;">药品数量:</el-tag>
					<el-input v-model="medicine.medicineNumber" :disabled="true" style="width: 100px;height: 20px;position: absolute;margin-top: -5px;margin-left: 10px;font-size: 13px;"
					placeholder="药品数量"></el-input>
				</div>

				<div style="position: absolute;margin-left: 300px;">
					<el-tag color="white" style="color: orangered;font-size: 30px;border: 0px;width: 80px;text-align: center;">¥</el-tag>
					<el-input v-model="medicine.medicineUnivalence" :disabled="true" style="width: 100px;height: 20px;position: absolute;margin-top: -5px;margin-left: 15px;font-size: 15px;"
					placeholder="药品价格"></el-input>
					<el-input-number v-model="num" @change="handleChange" :min="1" :max="100" label="描述文字" style="position:absolute;margin-left: 200px;margin-top: -50px;transform: scale(0.8);"></el-input-number>
				</div>
				<div>

					<el-button type="success" @click='open(medicine.medicineName,medicine.medicinePicture,medicine.medicineUnivalence)' v-model="medicine.medicineName" style="position: absolute;margin-left: 540px;margin-top: 0px;transform: scale(0.7);">收藏</el-button>
					<el-button type="success" v-model="look" style="position: absolute;margin-left: 760px;margin-top: 0px;transform: scale(0.7);">
						<router-link :to="{path:'/views/Detail/' + username +'/'+ xiangqing +'/'+ medicine.medicineName }">查看详情</router-link>
					</el-button>
					<el-button type="success" @click='Add(medicine.medicineName,medicine.medicinePicture,medicine.medicineUnivalence,medicine.medicineId)' v-model="gouwuche" style="position: absolute;margin-left: 670px;margin-top: 0px;transform: scale(0.7);">加入购物车</el-button>
					<el-button type="success" @click='Order(medicine.medicineName,medicine.medicinePicture,medicine.medicineUnivalence,medicine.medicineId)' v-model="buy" style="position: absolute;margin-left: 595px;margin-top: 0px;transform: scale(0.7);">立即购买</el-button>
				</div>




			</div>

		</div>


	</div>

</template>
<script>
	export default {
		props: ['newdrug', 'username'],
		data() {
			return {
				tableData: [{
					medicineId: '',
					medicinePicture: '',
					medicineName: "",
					medicineUnivalence: "",
					medicineNumber: ""

				}],
				
				num: 1,
				medicineSort: '',
				xiangqing: '详情',
			
				
			}
		},
		mounted() {
			var that = this


			this.$axios.post("http://localhost:8088/xiaoxiang/findAllMedicineSort", {
				medicineSort: this.newdrug
			}).then(function(response) {

				that.tableData = response.data.data
				console.log(response.data.data)
				// eslint-disable-next-line no-unused-vars
			}).catch(function(error) {})

		},
		beforeRouteEnter: (to, from, next) => {
			next();
		},
		methods: {
			open(medicineName,medicinePicture,medicineUnivalence) {
				
				var that = this
				this.$alert('收藏成功☺', '', {
					dangerouslyUseHTMLString: true,
					
				});
				console.log(that.username)
				console.log(medicineName)
				console.log(medicineUnivalence)
				this.$axios.post("http://localhost:8088/xiaoxiang/addCollection", {
					collectionMedicinePicture: medicinePicture,
					collectionMedicineName: medicineName,
					collectionMedicinePrice: medicineUnivalence,
					userName: that.username

				}).then(function(response) {

					that.tableData = response.data.data
					console.log(that.tableData)
					// eslint-disable-next-line no-unused-vars
				}).catch(function(error) {})
			
			// that.$router.push("/views/YangSheng/"+this.username + "/" +this.yangsheng)
				
			},
			Add(medicineName,medicinePicture,medicineUnivalence,medicineId) {
				var that = this
				console.log(medicineName)
				console.log(medicinePicture)
				console.log(medicineUnivalence)
				console.log(medicineId)
				console.log(that.num)
				this.$axios.post("http://localhost:8088/xiaoxiang/addShoppingCart", {
					shoppingCartMedicinePicture: medicinePicture,
					shoppingCartMedicineName: medicineName,
					shoppingCartMedicinePrice: medicineUnivalence,
					shoppingMedicineNumber: that.num,
					medicineId: medicineId,
					userName: that.username

				}).then(function(response) {

					that.tableData = response.data.data
					// eslint-disable-next-line no-unused-vars
				}).catch(function(error) {})
				this.$alert('加入购物车成功☺', '', {
					dangerouslyUseHTMLString: true
				});
			},
			Order(medicineName,medicinePicture,medicineUnivalence,medicineId) {
				var that = this
				console.log(medicineName)
				console.log(medicinePicture)
				console.log(medicineId)
				this.$axios.post("http://localhost:8088/xiaoxiang/addShopping", {
					shoppingMedicinePicture: medicinePicture,
					shoppingMedicineName: medicineName,
					shoppingMedicinePrice: medicineUnivalence,
					shoppingMedicineNumber: that.num,
					medicineId: medicineId,
					userName: that.username
					
			
				}).then(function(response) {
			
					that.tableData = response.data.data
					// eslint-disable-next-line no-unused-vars
				}).catch(function(error) {})
				this.$alert('购买成功☺', '', {
					dangerouslyUseHTMLString: true
				});
			}
			
		}
	}
</script>

<style>
</style>
